<template>
  <div class="setting">
    <a-layout-header class="header">
      <div class="logo">
        <img src="@/assets/logo.png"/>
      </div>
    </a-layout-header>
    <a-layout class="cont">
      <a-layout-sider>
        <Aside></Aside>
      </a-layout-sider>
      <a-layout-content class="main_cont">
        <router-view></router-view>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
  import Aside from './comp/Aside'

  export default {
    name: 'setting',
    components: {
      Aside
    }
  }
</script>
<style lang="scss">
  @import "styl/Antstyl";
</style>

<style scoped lang="scss">
  .setting {
    height: 100%;
    display: flex;
    flex-direction: column;
    .cont {
      flex: 1;
    }
  }

  .header {
    padding: 0;
    .logo {
      width: 200px;
      text-align: center;
      height: 100%;
      background: rgba(255, 255, 255, 0.2);
      float: left;
      padding: 7px 25px;
      img {
        display: block;
        height: 100%;
      }
    }
  }

  .main_cont {
    padding: 12px 10px;
  }
</style>
